<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flf-大事件-文章</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div class="header">
        <a href="#" class="logo fl"><img src="images/logo.png" alt="logo"></a>
        <div class="search_form fl">
            <input type="text" class="search_txt" placeholder="黑洞照片">
            <button class="search_btn"><i class="fa fa-search"></i></button>
        </div>
        <div class="link_info fr">
            <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;网站地图</a><br>
            <a href="#"><i class="fa fa-angle-right"></i>&nbsp;&nbsp;招聘信息</a>
        </div>
    </div>

    <div class="menu_con">
        <div class="menu">
            <div class="menu_collapse fl">
                <a href="javascript:;" class="level_one"><i class="fa fa-list-ul"></i>全部分类</a>
                <ul class="level_two">
                    <li class="up"></li>
                    <ul class="menuli">
                    </ul>
                </ul>
            </div>
            <ul class="left_menu fl menuli"></ul>
            <ul class="right_menu fr">
                <li><a href="#">科技专题</a></li>
                <li><a href="#">财经专题</a></li>
            </ul>
        </div>
    </div>
    <div class="main_con clearfix">
        <div class="left_con setfr">
            <!-- 主体内容 -->
            <div id="breadcrumb">
            </div>
            <!-- 评论 -->
            <form action="" class="comment_form" id="form">
                <!-- 发表评论区 -->
                <div class="form_group">
                    <label>用户名：</label>
                    <input type="text" placeholder="请输入用户名" class="comment_name">
                </div>
                <div class="form_group">
                    <label>评论内容：</label>
                    <textarea placeholder="请发表您的评论" class="comment_input"></textarea>
                </div>
                <div class="form_group">
                    <input type="submit" name="" value="评 论" class="comment_sub" onclick="get_commen()">
                </div>
            </form>
            <div class="comment_count">
                4条评论
            </div>
            <div id="comments">
            </div>
        </div>

        <div class="right_con setfl">
            <div class="common_wrap">
                <h3><i class="fa fa-bar-chart"></i> 一周热门排行</h3>
                <ul class="content_list" id="hot">

                </ul>
            </div>
            <div class="common_wrap">
                <h3><i class="fa fa-commenting-o"></i> 最新评论</h3>
                <ul class="content_list comment_list" id="newcon">
                </ul>
            </div>
            <div class="common_wrap">
                <h3><i class="fa fa-bullseye"></i> 焦点关注</h3>
                <ul class="content_list guanzhu_list" id="atten"></ul>
            </div>
        </div>
    </div>

    <div class="footer clearfix">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2019 深圳大事件信息技术股份有限公司 All Rights Reserved</p>
        <p>电话：0755-****888 粤ICP备*******8号</p>
    </div>

    <!-- 引入模板引擎js文件 -->
    <script src="./js/q_http.js"></script>
    <script src="./js/template-web.js"></script>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="./js/get.js"></script>


    <!-- 焦点关注 -->
    <script id="attention" type="text/html">
    {{each data}}
        <li><a href="#">{{$value.intro}}</a></li>
    {{/each}}
    </script>

    <!-- 热门排行 -->
    <script id="rank" type="text/html">
    {{each data}}
        <li>
        {{if $index == 0}}
            <span class="first">{{$index+1}}</span>
        {{else if $index == 1}}
            <span class="second">{{$index+1}}</span>
        {{else if $index == 2}}
            <span class="third">{{$index+1}}</span>
        {{else}}
            <span>{{$index+1}}</span>
        {{/if}}
        <a href="article.html?id={{$value.id}}">{{$value.title}}</a>
    </li>
    {{/each}}
    </script>

    <!-- 最新评价 -->
    <script id="latest_comment" type="text/html">
    {{each data}}
    <li>
        <span>{{$value.author.split('')[0]}}</span>
        <b><em>{{$value.author}}</em> {{$value.date}}说:</b>
        <strong>{{$value.intro}}</strong>
    </li>
    {{/each}}
    </script>

    <!-- 菜单栏 -->
    <script id="menulist" type="text/html">
        {{each data}}
            <li><a href="./list.html?aid={{$value.id}}">{{$value.name}}</a></li>
        {{/each}}
    </script>

    <!-- 文章主体内容 -->
    <script id="congl" type="text/html">

        <div class="breadcrumb">
            当前位置： <a href="./index.html">首页</a> &gt; <a href="./list.html?aid={{categoryId}}">{{category}}</a> &gt; 文章详情
        </div>
        <h3 class="article_title">{{title}}</h3>
        <div class="article_info">{{author}} 发布于 {{date}}&nbsp;&nbsp;&nbsp;分类: {{category}}&nbsp;&nbsp;&nbsp;阅读:
            ({{read}})&nbsp;&nbsp;&nbsp;评论: ({{comments}})</div>
        <div class="article_con">
            <p>{{content}}</p>
        </div>
        <div class="article_links">
            {{if prev}}
            上一篇： <a href="./article.html?id={{prev.id}}">{{prev.title}}</a><br>
            {{/if}}

            {{if next}}
            下一篇： <a href="./article.html?id={{next.id}}">{{next.title}}</a>
            {{/if}}
        </div>
    </script>

    <!-- 评论内容 -->
    <script id="comment_l" type="text/html">
        {{each data}}
        <div class="comment_list_con">
            <div class="comment_detail_list">
                <div class="person_pic fl">{{$value.author.split('')[0]}}</div>
                <div class="name_time fl"><b>{{$value.author}}</b><span>{{$value.date}}</span></div>
                <div class="comment_text fl">
                    {{$value.content}}
                </div>
            </div>
        </div>
        {{/each}}
    </script>



    <script>
        $(function () {

            /* 设定一个全局变量为当前文章id */
            let classid = 0;

            get_mune()

            get_content()

            get_commen_list();

            /* 引入get.js 获取相关数据 */
            get_hot()

            get_new_commen()

            get_attention()
        })



        /* 2.0 获取文章的内容 */
        function get_content() {
            // console.log(2);
            /* 2.1 获取相对应的id  */
            let id = window.location.href.split('=')[1];
            // console.log(id);

            /* 2.1 发送获取请求 */
            myAjax('get', '/index/article', { id: id }, function (gl) {
                // console.log(gl);
                /* 获取的数据类型
                code: 200
                    data: {id: 10, title: "监管风暴来袭！受正中珠江“牵连”，三家科创板受理企业已审核中止",…}
                    author: "管理员"
                    category: "经济特区"
                    categoryId: 5
                    comments: 44
                    content: "目前在主板IPO排队企业中，剔除审核状态为“中止审查”和“终止审查”，仍有19家公司审计机构为正中珠江。"
                    cover: "http://localhost/https://wpimg.wallstcn.com/8986d499-0ee4-49a3-ad98-9ffda141ae83.jpg"
                    date: "2019-05-20"
                    id: 10
                    next: {id: 11, title: "科幻场景要成真了？亚马逊正开发可识别人类情绪的智能手环"}
                    prev: {id: 9, title: "活久见！这家深圳公司被立案调查后暴力抗法，证监会稽查人员被抓伤！"}
                    read: 58
                    state: "草稿"
                    title: "监管风暴来袭！受正中珠江“牵连”，三家科创板受理企业已审核中止"
                    msg: "获取成功"
                */
                // console.log(gl);

                /* 2.2 进行赋值 */
                let ithtml = template('congl', gl.data);

                /* 2.3 添加到指定位置 */
                $('#breadcrumb').html(ithtml);
            });
            /* 2.4 给classid 赋值 */
            classid = id;

        };

        /* 3.0 添加用户评论 */
        function get_commen() {

            /* 3.1 表单的submit 事件 */
            $('#form').submit(function (e) {

                //阻止浏览器自动刷新默认指令
                e.preventDefault();

                /* 3.1 获取输入框的内容 */
                let name = $('.comment_name').val();
                let con = $('.comment_input').val();
                let arr = { 'author': name, 'content': con, 'articleId': classid }
                // console.log(arr);

                /* 3.2 发送上传数据请求 */
                myAjax('post', '/index/post_comment', arr, function (gl) {
                    if (gl.code !== 200) {
                        alert(gl.msg);
                        return;
                    };

                    /* 3.3 重新加载评论区内容 */
                    get_commen_list();
                })

            });
        };

        /* 4.0 获取评论区信息 */
        function get_commen_list() {

            /* 4.1 发送请求获取信息 */
            myAjax('get', '/index/get_comment', { articleId: classid }, function (gl) {
                // console.log(gl);

                /* 获取的数据类型
                code: 200
                    data: Array(10)
                    0:
                    articleId: 1
                    author: "邹娜"
                    content: "问维听么们火两工况率局即千准半之合最装往单图众委使中开积好。"
                    date: "2020-2-03"
                    id: 7563
                    state: "已通过"
                    time: "15:53:47" */

                /* 4.2 将获取的数据赋值给指定区域 */
                let ithtml = template('comment_l', gl);

                /* 4.3 将文本添加到指定的区域 */
                $('#comments').html(ithtml);

            })
        }


    </script>

</body>

</html>